<template>
	<!-- 页面全局配置 -->
	<view class="pageconfig">
		<!--vuetop-->
		<view class="flex1   response  flex  justify-start  "
			style="flex-direction: column;align-content: center;align-items: center;">
			<view class="flex2   response  flex  justify-start  "
				style="align-content: flex-start;align-items: center;">
				<image style="width:100rpx;height:100rpx;min-height:unset;" mode="" class="picture3 round "
					v-if="userInfo&&userInfo.avatar_file&&userInfo.avatar_file.path" :src="userInfo.avatar_file.path"></image>
				<image style="width:100rpx;height:100rpx;min-height:unset;" mode="" class="picture3 round " v-else
					:src="picsrc3"></image>
				<view class="flex4    flex  justify-start  "
					style="flex-direction: column;align-content: flex-start;align-items: stretch;">
					<text @click="to_login" class="text5 text-xl ">
						{{userInfo.nickname||userInfo.username||userInfo.mobile||"点击登录"}}</text>
					<view class="flex6   response  flex  justify-start  " @click="toUserInfo"
						style="flex-direction: row;align-content: center;align-items: center;">
						<image style="width:24rpx;height:24rpx;min-height:unset;" mode="" class="picture7 "
							:src="picsrc7"></image>
						<text> 编辑资料</text>
					</view>
				</view>
			</view>
			<view class="flex9   response  flex  justify-around  " style="flex-direction: row;">
				<view class="flex10  bg-white   flex  justify-start  " style="flex-direction: row;align-items: center;">
					<view class="flex11    flex  justify-start  " style="flex-direction: column;">
						<view class="flex12   response  flex  justify-center  "
							style="flex-direction: row;align-content: center;align-items: center;">
							<text class="text13 text-black text-df "> 0条</text>
						</view>
						<view class="flex14   response  flex  justify-center  "
							style="flex-direction: row;align-items: center;">
							<text> 短信充值</text>
							<image style="width:6px;height:12px;min-height:unset;" mode="" class="picture16 "
								:src="picsrc16"></image>
						</view>
					</view>
					<view class="flex17    flex  justify-end  ">
						<image style="width:80rpx;height:80rpx;min-height:unset;" mode="" class="picture18 "
							:src="picsrc18"></image>
					</view>
				</view>
				<view class="flex19  bg-white   flex  justify-start  " style="flex-direction: row;align-items: center;">
					<view class="flex20    flex  justify-start  " style="flex-direction: column;">
						<view class="flex21   response  flex  justify-center  "
							style="flex-direction: row;align-content: center;align-items: center;">
							<text class="text22 text-black "> 0.00元</text>
						</view>
						<view class="flex23   response  flex  justify-center "
							style="flex-direction: row;align-items: center;">
							<text> 余额</text>
							<image style="width:6px;height:12px;min-height:unset;" mode="" class="picture16 "
								:src="picsrc16"></image>
						</view>
					</view>
					<view class="flex26    flex  justify-end  ">
						<image style="width:80rpx;height:80rpx;min-height:unset;" mode="" class="picture27 "
							:src="picsrc27"></image>
					</view>
				</view>
			</view>
			<view class="flex28  bg-white  response  flex  justify-start  " style="flex-direction: column;">
				<view class="flex29   response  flex  justify-start  "
					style="flex-direction: row;align-content: flex-start;align-items: center;">
					<text class="text30 text-black text-lg "> 常用功能</text>
				</view>
				<view class="flex31   response  flex  justify-start  "
					style="flex-direction: row;align-content: center;align-items: center;">
					<image style="width:48rpx;height:48rpx;min-height:unset;" mode="" class="picture32 "
						:src="picsrc32"></image>
					<text class="text33 text-lg "> 已发信息</text>
				</view>
				<view class="flex34   response  flex  justify-start  "
					style="flex-direction: row;align-content: center;align-items: center;">
					<image style="width:48rpx;height:48rpx;min-height:unset;" mode="" class="picture35 "
						:src="picsrc35"></image>
					<text class="text36 text-lg "> 人工传话</text>
				</view>
				<view class="flex37   response  flex  justify-start  "
					style="flex-direction: row;align-content: center;align-items: center;">
					<image style="width:48rpx;height:48rpx;min-height:unset;" mode="" class="picture38 "
						:src="picsrc38"></image>
					<text class="text39 text-lg "> 我的收信</text>
				</view>
				<view class="flex40   response  flex  justify-start  " @click="changeLoginState"
					style="flex-direction: row;align-content: center;align-items: center;">
					<image style="width:38rpx;height:36rpx;min-height:unset;" mode="" class="picture41 "
						:src="picsrc41"></image>
					<text class="text42 text-lg "> 退出登录</text>
				</view>
			</view>
			<view class="flex43  bg-white  response  flex  justify-start  " style="flex-direction: column;">
				<view class="flex44   response  flex  justify-start  ">
					<image style="width:32rpx;height:32rpx;min-height:unset;" mode="" class="picture45 "
						:src="picsrc45"></image>
					<text> 温馨提示：</text>
				</view>
				<view class="flex47    flex flex-wrap justify-start  ">
					<text class="text48 response "> 2/10 0:00访问人数较多，可能出现查询不到或卡死情况，不影响短信发送，可稍后查看!</text>
				</view>
			</view>
		</view>

		<!--vuebottom-->
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	export default {
		data() {
			return {
				picsrc3: "/static/my/touxiang.png",
				picsrc7: "/static/my/gerenziliao.png",
				picsrc16: "/static/my/jiantou.png",
				picsrc18: "/static/my/duanxinchongzhi.png",
				picsrc25: "/static/my/jiantou.png",
				picsrc27: "/static/my/yue.png",
				picsrc32: "/static/my/duanxin.png",
				picsrc35: "/static/my/rengong.png",
				picsrc38: "/static/my/wodeduanxin.png",
				picsrc41: "/static/my/kaiguan.png",
				picsrc45: "/static/my/tixing.png",




			};
		},
		computed: {
			userInfo() {
				return store.userInfo
			},
			hasLogin() {
				return store.hasLogin
			},
			appConfig() {
				return getApp().globalData.config
			}
		},
		onLoad() {},
		methods: {
			async changeLoginState() {
				if (this.hasLogin) {
					await mutations.logout()
				} else {
					uni.redirectTo({
						url: '/uni_modules/uni-id-pages/pages/login/login-withoutpwd',
					});
				}
			},
			to_login() {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: './login'
					})
				}

			},
			toUserInfo() {
				console.log('user_info', this.hasLogin);
				if (!this.hasLogin) return;
				uni.navigateTo({
					url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
				})
			},

			/**
			 *          $vuetag = "";
			 *          $vuecss = "";
			 *          $vuejs = "";
			 *
			 */

			//获取数据

		}
	}
</script>

<style lang="less">
	/**
 *
 此处必须引用colorui样式,并放入根目录，css样式可以这样写
	@import "colorui/main.css";
	@import "colorui/icon.css";

 如需要引用colorui到全局，
 需要在App.vue 引入
 	@import "colorui/main.css";
	@import "colorui/icon.css";
 *
 */




	/**本页全局配置的代码**/
	.pageconfig {
		width: 100%;
		overflow: hidden;
		overflow-y: scroll;
		background-color: rgba(247, 252, 253, 1);
		height: 100vh;
	}



	/**pagedomcss**/


	.flex1 {
		width: 100%;
	}

	.flex2 {
		width: 100%;
		width: calc(100% - 80rpx);
		margin-top: 150rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
	}

	.picture3 {
		width: 100rpx;
		overflow: hidden;
		height: 100rpx;
	}

	.flex4 {
		width: 86%;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text5 {
		font-weight: 900;
	}

	.flex6 {
		width: 100%;
	}

	.picture7 {
		width: calc(24rpx - 40rpx);
		overflow: hidden;
		height: 24rpx;
		margin-right: 20rpx;
	}

	.flex9 {
		width: 100%;
		margin-top: 60rpx;
		margin-bottom: 60rpx;
	}

	.flex10 {
		width: 37%;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.flex11 {
		width: 49%;
	}

	.flex12 {
		width: 100%;
	}

	.text13 {
		font-weight: 700;
	}

	.flex14 {
		width: 100%;
	}

	.picture16 {
		margin-left: 1px;
		// width: 20rpx;
		overflow: hidden;
		// height: 20rpx;
	}

	.flex17 {
		width: 47%;
	}

	.picture18 {
		width: 80rpx;
		overflow: hidden;
		height: 80rpx;
	}

	.flex19 {
		width: 37%;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.flex20 {
		width: 49%;
	}

	.flex21 {
		width: 100%;
	}

	.text22 {
		font-weight: 700;
	}

	.flex23 {
		width: 100%;
	}

	.picture25 {
		width: 20rpx;
		overflow: hidden;
		height: 20rpx;
	}

	.flex26 {
		width: 47%;
	}

	.picture27 {
		width: 80rpx;
		overflow: hidden;
		height: 80rpx;
	}

	.flex28 {
		width: 100%;
		width: calc(100% - 80rpx);
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
	}

	.flex29 {
		width: 100%;
	}

	.text30 {
		font-weight: 900;
	}

	.flex31 {
		width: 100%;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.picture32 {
		width: calc(48rpx - 40rpx);
		overflow: hidden;
		height: 48rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.text33 {
		font-weight: 500;
	}

	.flex34 {
		width: 100%;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.picture35 {
		width: calc(48rpx - 40rpx);
		overflow: hidden;
		height: 48rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.text36 {
		font-weight: 500;
	}

	.flex37 {
		width: 100%;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.picture38 {
		width: calc(48rpx - 40rpx);
		overflow: hidden;
		height: 48rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.text39 {
		font-weight: 500;
	}

	.flex40 {
		width: 100%;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}

	.picture41 {
		width: calc(38rpx - 40rpx);
		overflow: hidden;
		height: 36rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.text42 {
		font-weight: 500;
	}

	.flex43 {
		width: 100%;
		width: calc(100% - 60rpx);
		margin-top: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.flex44 {
		width: 100%;
		margin-bottom: 20rpx;
	}

	.picture45 {
		width: 32rpx;
		overflow: hidden;
		height: 32rpx;
	}

	.flex47 {
		width: 94%;
	}

	.text48 {
		width: 100%;
	}
</style>